// 确认消息
<template>
<p>提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。</p>
<p>调用 <code>ElMessageBox.confirm</code> 方法以打开 confirm 框。它模拟了系统的 <code>confirm</code>。 Message Box 组件也拥有极高的定制性，我们可以传入 <code>options</code> 作为第三个参数，它是一个字面量对象。 <code>type</code> 字段表明消息类型，可以为<code>success</code>，<code>error</code>，<code>info</code>和 <code>warning</code>，无效的设置将会被忽略。 需要注意的是，第二个参数 <code>title</code> 必须定义为 <code>String</code> 类型，如果是 <code>Object</code>，会被当做为 <code>options</code>使用。 在这里我们返回了一个 <code>Promise</code> 来处理后续响应。</p>
  <el-button plain @click="open">Click to open the Message Box</el-button>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'

const open = () => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: 'Delete completed',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>